import 'package:application_with_bilibili/MyFont.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Namer App',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
            seedColor: const Color.fromARGB(255, 255, 3, 3)),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            '宝可梦大集结',
            style: TextStyle(
              color: Color.fromARGB(255, 255, 0, 0),
              fontSize: 24,
            ),
          ),
          backgroundColor: Color.fromARGB(255, 255, 255, 255),
        ),
        body: MyBody(),
      ),
    );
  }
}

class MyBody extends StatelessWidget {
  MyBody({super.key});

  Widget byCount() {
    return GridView.count(
      // 一行的Widget数量（和extend方法只有这个属性有差别）
      crossAxisCount: 2,
      // 垂直间距
      crossAxisSpacing: 20,
      // 水平间距
      mainAxisSpacing: 20,
      padding: const EdgeInsets.all(15),
      // 宽高比
      childAspectRatio: 16 / 9,
      children: iconList(),
    );
  }

  Widget byExtend() {
    return GridView.extent(
      // 横轴子元素的最大长度
      maxCrossAxisExtent: 100,
      children: iconList(),
    );
  }

  Widget byBuilder() {
    return GridView.builder(
        padding: const EdgeInsets.all(15),
        itemCount: 4,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 横轴上的子元素数量
          crossAxisCount: 2,
          // 垂直间距
          crossAxisSpacing: 20,
          // 水平间距
          mainAxisSpacing: 20,
        ),
        itemBuilder: (context, index) {
          return _initGridViewBuildData(index);
        });
  }

  Widget byBuilder2() {
    return GridView.builder(
        padding: const EdgeInsets.all(15),
        itemCount: 4,
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 100,
          // 垂直间距
          crossAxisSpacing: 20,
          // 水平间距
          mainAxisSpacing: 20,
        ),
        itemBuilder: (context, index) {
          return _initGridViewBuildData(index);
        });
  }

  Widget _initGridViewBuildData(int index) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black),
      ),
      child: iconList()[index],
    );
  }

  List<Widget> iconList() {
    return [
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 251, 255, 22),
        ),
        child: Icon(MyFont.pikachu),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 255, 255, 255),
        ),
        child: Icon(MyFont.pokemonBall),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Color.fromARGB(237, 22, 150, 255),
        ),
        child: Icon(MyFont.psyduck),
      ),
      Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 22, 65, 255),
        ),
        child: Icon(MyFont.squirtle),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return byBuilder();
  }
}
